<template>
  <div class="cardModel" v-loading="loading">
    <el-row v-if="digitalList.length > 0" :gutter="20" :style="{ height: 'calc(100vh - 120px)' }" ref="digitalRef">
      <FlexScroll
        :disabled="pagination.page >= pageCount"
        @scroll="nextPage"
        :immediate="immediate"
        class="model-flex-box"
      >
        <el-col class="col-model" v-for="(item, index) in digitalList" :key="index" :xs="24" :sm="8">
          <el-card class="model-card">
            <div class="model-flex">
              <!--  -->
              <Avatar
                :avatar="item.avatar"
                :class-name="'model-image'"
                :icon-size="80"
                :on-click="() => handleClick(true, item)"
              />
              <div class="main">
                <div class="top-info">
                  <div class="title">{{ item.nickname }}</div>
                  <el-popover
                    ref="morePopover"
                    popper-class="morePopoverZw"
                    trigger="click"
                    width="60"
                    :show-arrow="false"
                  >
                    <div class="edit" @click="handleEditDpData(item)">编辑</div>
                    <div class="delete" @click="handleDeleteId(item.id)">删除</div>
                    <template #reference>
                      <el-icon class="more" :color="'#ddd'" ref="buttonRef">
                        <MoreFilled />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="bottom-info">
                  {{ item.info }}
                </div>
              </div>
            </div>
            <el-divider />
            <div class="model-end">
              <div class="model-end">
                <el-avatar class="avatar" :src="item.admin_avatar" :size="30" :icon="UserFilled" />
                <div class="f12666">{{ item.admin_nickname }}</div>
              </div>
              <div class="f12999">{{ dayjs(item.createtime).format("HH:mm") }}</div>
            </div>
          </el-card>
        </el-col>
      </FlexScroll>
    </el-row>
    <el-empty v-if="!loading && digitalList.length <= 0" description="暂无数据" />
  </div>

  <!-- 数字人弹窗模块 -->
  <CreateDigitalPeople
    v-if="visible"
    :visible="visible"
    type="edit"
    :edit-data="editData"
    @edit-dp-data="handleEditDpData"
    @close="handleClose"
  />

  <div v-if="robotVisible" class="robot-container">
    <DigitalRobot @close="handleClick(false)" />
  </div>
</template>

<script lang="ts" setup>
import Avatar from "@/components/Avatar/index.vue"
import CreateDigitalPeople from "@/components/Create/components/dialogDigitalPeople.vue"
import FlexScroll from "@/components/FlexScroll/index.vue"
import { UserFilled } from "@element-plus/icons-vue"
import dayjs from "dayjs"
import Pubsub from "pubsub-js"
import { nextTick, onMounted, ref } from "vue"
import DigitalRobot from "./robot.vue"
import useModelList, { DigitalListProps } from "./useModelList"

const {
  loading,
  pagination,
  visible,
  pageCount,
  immediate,
  digitalRef,
  digitalList,
  editData,
  initModelList,
  handleEditDpData,
  handleClose,
  handleDeleteId,
  nextPage
} = useModelList()

const robotVisible = ref<boolean>(false)

const handleClick = (bool: boolean, item?: DigitalListProps) => {
  robotVisible.value = bool
}

onMounted(async () => {
  loading.value = true
  await initModelList("init")
  loading.value = false

  Pubsub.subscribe("DIGITAL_UPDATE_INIT", async (_: any) => {
    nextTick(async () => {
      await initModelList("init")
    })
  })
})

defineExpose({
  nextPage
})
</script>

<style lang="scss" scoped>
.robot-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2009;
  background-color: rgba(0, 0, 0, 0.85);
}

::v-deep .el-tooltip__trigger {
  cursor: pointer;
}

.radio-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.radio-info {
  margin-bottom: 10px;
  margin-right: 14px !important;
  border-radius: 20px !important;
  background: #eee;
  padding: 8px 20px;
  line-height: 24px;
  color: #666;
  /* 正文_加粗 */
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
}

.radio-active {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-black);
  font-weight: bold;
}

::v-deep .model-flex-box {
  .content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
}

.edit,
.delete {
  cursor: pointer;
  padding: 8px 0;
  text-align: center;
}

.delete {
  color: var(--el-color-primary);
}

::v-deep .avatar_icon_img {
  .model-image {
    border-radius: 20px;
    margin-right: 20px;
    cursor: pointer;
    flex-shrink: 0;
  }
}

.cardModel {
  width: 100%;
  height: 100%;

  .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
  }

  .el-divider--horizontal {
    margin: 16px 0;
  }

  .model-card {
    border-radius: 10px;
    box-shadow: 0px 4px 12px 0px rgba(58, 51, 51, 0.05);
    border: none;

    .model-flex {
      width: 100%;
      display: flex;
      align-items: flex-start;
    }

    .main {
      width: 100%;
    }

    .model-end {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top-info {
      width: calc(100% - 100px);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        width: 80vw;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行;
        color: var(--el-color-info);
        font-size: 18px;
        cursor: pointer;
      }
    }

    ::v-deep .el-tooltip__trigger {
      flex: 1;
      margin-left: 10px;
    }

    .ot {
      padding-right: 20px;
      color: #999;
      font-size: 12px;
      font-weight: 400;
      display: inline-block;
    }
  }
}

.col-model {
  margin-bottom: 24px;
}

.bottom-info {
  margin: 10px 0;
  color: #666;
  max-width: 80%;
  min-height: 33px;
  font-size: 14px;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 450px) {
  .bottom-info {
    max-width: 70% !important;
  }
}

@media screen and (min-width: 760px) and (max-width: 1400px) {
  .bottom-info {
    max-width: 65% !important;
  }
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
  margin-right: 16px;
}

.f12666 {
  margin-left: 10px;
}
</style>
